<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="icon" href="/images/3.ico" type="image/x-icon">
    <link href="https://fonts.googlefonts.cn/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.font.im/css?family=Hanalei+Fill" rel="stylesheet">

    <style>
    body{
      background-image: url(/images/1.jpg);
      background-size: 100%;
      margin:0;
      height: 100vh;
      width: 10vm;
      overflow: hidden;
      display: flex;
      align-items: center;
      color: white;
      font-family: 'Hanalei Fill', cursive;
      font-weight: 300;
      /* background: linear-gradient(to left bottom,#e9e9e9,#ebebeb,#d6d6d6,#b1b1b1,#505050); */
    }
    .login-div{
      filter: blur(0.4px);
      background-image: url(/images/2.jpeg);
      margin:0 auto;
      width: 430px;
      height: 650px;
      padding: 60px 35px 35px 35px;
      border-radius: 10px;
      /* background: radial-gradient(circle,#555555,#535353,#505050,#4e4e4e,#4c4c4c); */
      box-shadow: 
      0px 20px 20px rgba(0, 0, 0, 0.2),
      0px 5px 10px rgba(0, 0, 0, 0.2),
      0px 70px 50px rgba(0, 0, 0, 0.4),
      30px 50px 50px rgba(0, 0, 0, 0.2),
      -30px 50px 50px rgba(0, 0, 0, 0.2),
      inset 20px 0px 60px rgba(0, 0, 0, 0.1),
      inset -20px 0px 60px rgba(0, 0, 0, 0.1);
    }
    .login{
      background-image: url(/images/7.png);
      width:89px;
      height: 89px;
      border-radius: 50%;
      margin: 0 auto;
      box-shadow: 1px 1px 2px rgba(0, 0, 0,0.1);
    }
  .title{
    text-align: center;
    font-size: 28px;
    padding-top: 24px;
    letter-spacing: 0.5px;
  }
  .sub-title{
    text-align: center;
    font-size: 15px;
    padding-top: 7px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
  }
  .fields{
    width: 100%;
    padding: 100px 5px 30px 5px;
  }
  .fields input{
    border: none;
    outline: none;
    background: none;
    font-size: 18px;
    /*font-family: 'Lato', sans-serif;*/
    color: white;
    padding: 10px 10px 10px 5px;
  }
  .username,.password{
    display: block;
    border-bottom: 1px solid #b3b3b3;
    margin-bottom: 30px;
  }
  ::placeholder{
    color: white;
    opacity: 1;
    font-size: 20px;
    font-weight: 300;
  }

  .signin-button{
    outline: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    font-size: 22px;
    /*font-family: 'Lato', sans-serif;*/
    color: white;
    text-align: center;
    letter-spacing: 1px;
    background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
    box-shadow: 1px 1px 2px rgba(0, 0, 0,0.1)
  }
  .signin-button:hover{
    background:radial-gradient(circle,#2fdbb6,#32d5b3,#32c9a8,#36c7a7,#38bb9f) ;
  }
  .signin-button:active{
    background:radial-gradient(circle,#1da88a,#1ea084,#229c82,#23947b,#238d76) ;
  }
  .link{
    padding-top: 20px;
    text-align: center;
    /*font-family: 'Lato', sans-serif;*/
  }
  .link a {
    text-decoration: none;
    color:white;
    font-size: 20px;
  }

    </style>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
    <script src="/js/bootstrap.js"></script>
</head>
<body>
  <div class="login-div">
    <div class="login"></div>
    <div class="title">Red Stapler</div>
    <div class="sub-title">Beta</div>
    <div class="fields" style="margin-top: -60px">
        <div class="username">
          <input type="username" class="user-input" placeholder="Username"id="username" name="username"></div>
        <div class="password">
            <input type="password" class="pass-input" placeholder="Password"id="password" name="password"></div>
    </div>
    <!-- 单选 按钮:name相同，即为单选按钮，二者只能有一个选中-->
    <div style="font-size: 20px;padding-top: -20px;padding-left: 15px">
        学生<input type="radio" value="student" name="role" checked onclick="inputChecked()">
        教师<input type="radio" value="teacher" name="role" onclick="inputChecked()">
    </div>
    <button class="signin-button" onclick="login();" style="margin-top: 20px">LOG IN</button>
    <div class="link"><a href="#">Forgot password?</a></div>
  </div>
  <script type="text/javascript">
      function login(){
          var inputSelect = document.getElementsByTagName('input');
          var obj = {
                  radio: [],
                  checkbox: []
              },
              value = '';
          for (var i = 0, len = inputSelect.length; i < len; i++) {
              if (inputSelect[i].checked && inputSelect[i].type === 'radio') {
                  obj.radio.push(inputSelect[i].value);
                  value += inputSelect[i].value;
              }
              if (inputSelect[i].checked && inputSelect[i].type === 'checkbox') {
                  obj.checkbox.push(inputSelect[i].value);
                  value += (inputSelect[i].value);
              }
          }

          var name=$("#username").val();
          var password=$("#password").val();

          if(value == 'student') {
              $.ajax({
                  url: "/webapi/login/user",
                  data: {
                      username: name,
                      password: password
                  }
              }).done(function (rs) {
                  if (rs >= 0) {
                      //成功
                      window.location.href = "/starter/starter";     //student/list

                  } else {
                      alert("出错了，您的用户名和密码是乱写的吗？");
                  }

              });
          }else {
              $.ajax({
                  url:"/webapi/login/teacher",
                  data:{
                      username:name,
                      password:password
                  }
              }).done(function (rs) {
                  if(rs>=0){
                      //成功
                      window.location.href="/starter/starter";     //student/list

                  }else{
                      alert("出错了，您的用户名和密码是乱写的吗？");
                  }

              });
          }
      }





      // 进入界面先监听一次，避免用户没有选，而没有获取到值，默认是student。
      inputChecked();

      // 监听radio按钮 ：学生还是教师登录
      function inputChecked() {
          var inputSelect = document.getElementsByTagName('input');
          var obj = {
                  radio: [],
                  checkbox: []
              },
              value = '';
          for (var i = 0, len = inputSelect.length; i < len; i++) {
              if (inputSelect[i].checked && inputSelect[i].type === 'radio') {
                  obj.radio.push(inputSelect[i].value);
                  value += inputSelect[i].value;
              }
              if (inputSelect[i].checked && inputSelect[i].type === 'checkbox') {
                  obj.checkbox.push(inputSelect[i].value);
                  value += (inputSelect[i].value);
              }
          }
          // alert(value);

          // 获取到radio按钮值后放到浏览器session里：【key:role,value:radio值】
          window.localStorage.setItem("role", value);
          return obj;
      }
  </script>
</body>
</html>